<?php
/**
 * Created by PhpStorm.
 * User: linyh
 * Date: 2017/11/25 0025 10:13
 */
?>
<link rel="stylesheet" href="/css/dataTables.bootstrap.min.css">
<!--<div class="content-wrapper">-->
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        新闻列表
        <!-- <small>advanced tables</small> -->
    </h1>
    <!-- <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li><a href="#">Tables</a></li>
        <li class="active">Data tables</li>
    </ol> -->
</section>

<!-- Main content -->
<section class="content">
<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <!-- <div class="box-header">
                <h3 class="box-title">所有新闻</h3>
            </div> -->
            <!-- /.box-header -->
            <div class="box-body">
                <table id="table" class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>新闻标题</th>
                        <th>作者</th>
                        <th>时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</section>

<script src="/js/jquery.dataTables.min.js"></script>
<script src="/js/dataTables.bootstrap.min.js"></script>
<script>
var $table = $('#table');
var $tr = $table.find('tbody tr').remove();
$.ajax('/api/news/list', {
    type: 'GET',
    data: {
        'type': 1
    },
    dataType: 'json',
    headers: {'HTTP_X_REQUESTED_WITH': 'XMLHttpRequest'}
}).then(function(ret) {
    if(ret.state ==0) {
        data = ret.data;
        $('#table').DataTable({
            "columnDefs": [
                {
                    "targets": 0,
                    "data": "title",
                    "render": function ( data, type, row, meta ) {
                        return '<a href="/news/detail?id=' + row.id + '">' + row.title + '</a>';
                    }
                }
            ],
            data: data.newsList,
            columns: [
                { data: 'title' },
                { data: 'author.username' },
                { data: 'time' },
                // { data: 'office' }
            ],
            'paging'      : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false
        })
        $("table tr th").css({"text-align":"center"});
        $("table").css({"text-align":"center"});
    } else {
        alert(ret.message);
    }
});
</script>